<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>${locale("operlog-title")}</title>
	<link rel="stylesheet" type="text/css" href="../lib/easyui/themes/${skin!'default'}/easyui.css"/>
	<link rel="stylesheet" type="text/css" href="../lib/easyui/themes/icon.css"/>
	<style type="text/css">
		#condForm div{margin:5px 0;}
		#condForm label{width:70px;text-align:right;display:inline-block;}
		#condForm input{width:180px;}
		
		.user-edit{cursor:pointer;}
		.label{text-align:right;}
		.text input{width:200px;}
		.success{color:#33CF46;}
		.fail{color:#EF5C00;}
		
		#condition{padding-bottom:5px;display:none;}
		#condition .title{font-size:14px;font-weight:bold;padding:0 5px 5px;border-bottom:1px dotted #CCCCCC;}
		#condition .item{white-space:nowrap;margin:5px 10px 0 0;height:20px;line-height:20px;float:left;padding:0 22px 0 3px;position:relative;border:1px black solid;}
		#condition a:link,#condition a:visited{position:absolute;top:2px;right:2px;text-decoration:none;width:16px;height:16px;background:url('../lib/easyui/themes/icons/cross.png');display:block;overflow:hidden;}
		#condition a:hover,#condition a:active{background:url('../lib/easyui/themes/icons/cross.png') #DDD;}
	</style>
</head>
<body class="easyui-layout">
	<!--条件-->
	<div id="filterBox" title="${locale("search-condition")}" style="width:320px;padding:10px;">
		<form id="condForm">
			<div>
				<label>${locale("date")}　${locale("from")}</label>
				<input class="easyui-datebox" style="width:185px;" name="dateFrom" />
			</div>
			<div>
				<label>${locale("to")}</label>
				<input class="easyui-datebox" style="width:185px;" name="dateTo" />
			</div>
			<div>
				<label>${locale("user-name")}</label>
				<input type="text" name="username" />
			</div>
			<div>
				<label>${locale("event")}</label>
				<input type="text" name="event" />
			</div>
			<div>
				<label>IP</label>
				<input type="text" name="ip" />
			</div>
			<div>
				<label>${locale("status")}</label>
				<select class="easyui-combobox" name="status" style="width:185px;">
				    <option value="0">${locale("all")}</option>  
				    <option value="1">${locale("success")}</option>  
				    <option value="2">${locale("fail")}</option>  
				</select>
			</div>
	    </form>
	</div>
	<!--grid-->
	<div data-options="region:'center',title:'${locale("search-content")}'">
	   <table id="list"></table>
	   <div id="toolbar">
	      <a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-search" plain="true" id="search">${locale("search-btn")}</a>
	   	  <div id="condition">
				<div class="title">${locale("search-curr-condition")}</div>
				<div id="items">
					<div style="clear:both;"></div>
				</div>
		   </div>
	   </div>
	</div>
	
	<script type="text/javascript" src="../lib/jquery-1.8.0.min.js"></script>
	<script type="text/javascript" src="../lib/easyui/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="../lib/locale/lang-${language!'zh_CN'}.js"></script>
	<script type="text/javascript" src="../js/common.js"></script>
	<script type="text/javascript">
		//获取FORM表单参数
		var getFormParam = function(form){
			var params = form.serializeArray();
            var param = {};
            $.each(params,function(index,val){
                param[val.name] = val.value;
            });
            return param;
		};
		$(function(){
			$('#filterBox').dialog({
				minimizable:false,
				maximizable:false,
				closed:true,
				resizable:false,
				modal:true,
				iconCls:'icon-search',
				buttons: [{
					text:'${locale("mg-ok")}',
					iconCls:'icon-ok',
					handler:function(){
						$('#condition').show();
						$('#items').prepend('<div class="item"><b>用户帐号</b>：admin111<a title="删除该条件" href="javascript:void(0);"></a></div>');
						var param = getFormParam($('#condForm'));
            			$('#list').datagrid('reload',param);
						//$('#list').datagrid('resize');
						$('#filterBox').dialog('close');
					}
				},{
					text:'${locale("mg-close")}',
					handler:function(){
						$('#filterBox').dialog('close');
					}
				}]
			});
			$('#list').datagrid({
			    url:'log.search.jx',
			    fit:true,
			    singleSelect:true,
			    rownumbers:true,
				pagination:true,
				toolbar:'#toolbar',
			    columns:[[
			        {field:'username',title:'${locale("user-name")}',width:130,sortable:true},
			        {field:'date',title:'${locale("date")}',width:100,sortable:true},
			        {field:'event',title:'${locale("event")}',width:80,sortable:true},
			        {field:'ip',title:'ip',width:80,sortable:true},
			        {field:'status',title:'${locale("status")}',width:70,sortable:true,formatter:function(value,row,index){
			        	if(value == 1){
			        		return '<span class="success">${locale("success")}</span>';
			        	}else{
			        		return '<span class="fail">${locale("fail")}</span>';
			        	}
			        }},
			        {field:'desct',title:'${locale("desct")}',width:350}
			    ]],
			    loadFilter:function(data){
			    	if($.requestSuccess(data)){
			    		return data;
			    	}
			    	return {"total":0,"rows":[]};
			    },
			    onLoadError:$.requestError
			});
			$("#search").click(function(){
				$("#filterBox").window('open');
			});
			$("#condition a").live('click',function(){
			    var self = $(this);
			    var item = self.closest(".item");
			    if(item.siblings(".item").length == 0){
			    	item.closest("#condition").hide();
			    	$('#list').datagrid('resize');
			    }
			    item.remove();
			});
		});
	</script>
</body>
</html>